<!-- <template>
  <el-config-provider namespace="ep">
    <BaseHeader />
    <div class="flex main-container">
      <el-aside width="200px">
        <el-scrollbar>
          <BaseSide />
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-header height="40px">
          <Nav />
        </el-header>
        <el-main style="padding-top: 10px;">
          <RouterView />
        </el-main>
      </el-container>
    </div>
  </el-config-provider>
</template> -->

<template>
  <el-config-provider namespace="ep">

    <el-container class="layout-container-demo">
      <el-aside :width="isCollapse ? '64px' : '180px'" style="transition: width 0.4s ease-out;"
        :class="{ 'el-aside-close': isClose }">
        <BaseSide />
      </el-aside>

      <el-container>
        <el-header style=" font-size: 12px" height="40px">
          <Nav />
        </el-header>

        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>

  </el-config-provider>
</template>


<script setup lang="ts" name="App">

import BaseSide from "./components/layouts/BaseSide.vue";
import { ElMessage } from "element-plus";
import { onBeforeUnmount, onMounted, onUnmounted, ref, watch } from "vue";
import { RouterView } from "vue-router";
import mitter from "./util/mitter";

let isCollapse = ref(true);

let isClose = ref(window.innerWidth < 768);

onMounted(() => {
  mitter.on('collapse', (val: any) => {
    isCollapse.value = val
  })
});

onUnmounted(() => {
  mitter.off('collapse')
})

const updateWindowSize = () => {
  isClose.value = window.innerWidth < 768;

  if (isClose.value) {
    console.log('移动端');
  } else {
    console.log('非移动端');
  }

};

// 使用watch来监听窗口大小变化（也可以使用其他方式）
watch(() => window.innerWidth, (newVal, oldVal) => {
  updateWindowSize();
},
  { immediate: false }
);
onMounted(() => {
  window.addEventListener("resize", updateWindowSize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", updateWindowSize);
});

</script>

<style scoped>
#app {
  text-align: center;
  color: var(--ep-text-color-primary);
}

.layout-container-demo {
  /* height: calc(100vh - var(--ep-menu-item-height) - 3px); */
  height: calc(100vh - 3px);
}

.el-aside-close {
  width: 0;
}
</style>
